// login/CaptchaFormItem.tsx (简单模拟验证码生成与验证)
import React, {useState} from 'react';
import {Button, Input, message, Form} from 'antd';

const CaptchaFormItem: React.FC = () => {
  const [captcha, setCaptcha] = useState<number>(Math.floor(Math.random() * 100)); // 简单生成一个0-99的随机数作为验证码
  const [userInput, setUserInput] = useState<string>('');

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setUserInput(event.target.value);
  };

  const handleCaptchaGenerate = () => {
    setCaptcha(Math.floor(Math.random() * 100));
  };

  const validateCaptcha = () => {
    if (parseInt(userInput, 10) === captcha) {
      message.success('验证码正确');
      // 在实际场景下，这里可能需要清空输入并重置表单等操作
    } else {
      message.error('验证码错误，请重新输入');
    }
  };

  return (
    <div>
      <Form.Item label="验证码">
        <Input value={userInput} onChange={handleInputChange}/>
      </Form.Item>
      <div>当前验证码：{captcha}</div>
      <Button type="primary" onClick={handleCaptchaGenerate}>
        刷新验证码
      </Button>
      <Button type="primary" onClick={validateCaptcha}>
        验证验证码
      </Button>
    </div>
  );
};

export default CaptchaFormItem;
